<template>
  <div class="store">
    <div ref="mescroll" class="mescroll" :class="(storeList.length <= 0) ? 'none' : ''">
      <div class="search">
        <x-address :title="title" :hide-district="true" value-text-align="right" @on-shadow-change="onShadowChange" @on-hide="getListByAddr" :list="ChinaAddressV4Data"></x-address>
        <img class="img" src="@/assets/mendian1.png" />
        <input type="text" class="search-input" v-model="keyword" placeholder="请输入您要搜索的门店">
        <span class="serach-btn" @click="getListByText">搜索</span>
      </div>
      <div class="store-list">
        <div class="item" v-for="(item, index) in storeList" :key="index" @click="router({path: './storeDetails', query:{storeId: item.id}})">
          <img :src="item.img" class="store-img" alt="">
          <p class="store-name">{{item.title}}</p>        
          <p class="store-address">
            <span>{{(item.distance > 1000) ? parseInt(item.distance/1000)+"km+" : parseInt(item.distance)+'m'}}</span>
            <span class="address">{{item.address}}</span>
          </p>
          <div class="time">
            <img src="@/assets/mendian2.png" alt="">
            <span>{{item.introduce}}</span>
          </div>
        </div>
      </div>
      <div class="none" v-show="noDate">
        <img src="@/assets/kongzhuangtai.png" alt="">
        <p>暂无搜索结果，换个关键词或者地址再试试吧</p>
      </div>
    </div>
  </div>
</template>

<script>

import { XAddress, ChinaAddressV4Data } from 'vux'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getSearchDoorStoreLists } from '@/api/api'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
import 'swiper/dist/css/swiper.css'

export default {
  components: {
    swiper,
    swiperSlide,
    XAddress,
    ChinaAddressV4Data,  
  },
  data () {
    return {
      ChinaAddressV4Data: ChinaAddressV4Data,
      title: '省/市',
      count: 0,
      list: ['1'],
      bannerStore: {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
      },
      keyword: '',
      city: '',
      noDate: false,
      storeList: [],
    }
  },
  created () {
    this.uid = sessionStorage.getItem('uid');
  },
  mounted () {
    this.mescroll = new MeScroll(this.$refs.mescroll, { 
      up: {
        callback: this.upCallback
      }
    })
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    onShadowChange (ids, names) {
      console.log(names)
      this.count++
      if(this.count <= 1){
        return
      }
      this.title = (names[1] == '市辖区') ? names[0] : names[1];
    },
    getListByAddr () {
      this.city = this.title;
      this.mescroll.resetUpScroll();
    },
    getListByText () {
      this.mescroll.resetUpScroll();      
    },
    upCallback (page) {
      var dataJson = {        
        page: page.num,
        pageSize: page.size,
        lat: sessionStorage.getItem('lat'),
        lon: sessionStorage.getItem('lon'),
        uid: this.uid,
        keyword: this.keyword,
        city: this.city
      }
      getSearchDoorStoreLists(dataJson).then((res) => {
        if (page.num == 1){
          this.storeList = []
        }
        if(res.data.info == null){
          this.mescroll.endSuccess(0);
        }else{
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.info);
          })
          this.storeList = this.storeList.concat(res.data.info)
          if(this.storeList.length == 0){
            this.noDate = true;
          }else{
            this.noDate = false;
          }
        }
      }).catch((err) => {
        console.dir(err)
        this.mescroll.endErr()
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
  .store
    max-width 100vw
    min-height 100vh
    .mescroll
      position fixed
      top 0
      bottom 0
      height auto
      box-sizing border-box
      background-color #fff
    .mescroll.none
      background-color #F5F7FA
    .search
      height 4.4rem
      line-height 4.4rem
      background-color #fff
      position relative
      position sticky
      top 0
      z-index 9
      box-shadow 1px 1px 3px rgba(0,0,0,.2)
      .img
        position absolute
        top 2.2rem
        width .7rem
        left 7.5rem
      .search-input
        position absolute
        width calc(100% - 15rem)
        right 5.5rem
        outline none
        height 4.4rem
      .serach-btn
        position absolute
        right 0
        width 5.5rem;
        line-height 4.4rem
        text-align center        
    .store-list
      padding 0 1.5rem
      overflow hidden
      margin-bottom 1rem
      .item
        width calc(50% - .75rem)
        float left
        margin-right 1.5rem
        margin-top 3rem
        &:nth-child(2n)
          margin-right 0
        .store-img
          width 100%
          border-radius .4rem
          height 12.4rem
          object-fit cover
        .store-name
          font-size 1.7rem
          font-weight bold
          line-height 2.7rem
          color #333
          margin-top 1rem
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
        .store-address
          font-size 1.2rem
          color #999
          font-weight 400
          overflow hidden
          line-height 1.4rem
          height 1.4rem
          margin-top 1rem
          span
            float left
          .address
            white-space nowrap
            text-overflow ellipsis
            overflow hidden
            float right
            width calc(100% - 6rem)
            padding-left 1.5rem
            border-left 1px solid #e6e6e6
        .time
          overflow hidden
          margin-top 1.5rem
          img
            width 1.6rem
            float left
          span
            color #43A047
            font-weight bold
            font-size 1.2rem
            float left
            margin-left .7rem
            line-height 1.6rem
            width calc(100% - 2.3rem)
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
    .none
      img
        width 21.5rem
        margin-top 12rem
        position relative
        left 50%
        margin-left -10.75rem
      p
        color #333333
        font-size 1.3rem
        margin-top 4rem
        text-align center
</style>